import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Radio } from 'antd';
import { WeaNewScroll,WeaTab,WeaTools,WeaReqTop,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
@observer
export default class ReportShare extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        isrefesh:false,
        columns:[
          {title: '共享类型',dataIndex: 'sharetype',width:'30%',
          render:(text, record, index) => <div title={text}>{text}</div>
          },
          {title: '共享明细',dataIndex: 'sharedetail',width:'20%',
          render:(text, record, index) => <div title={text}>{text}</div>
          },
          {title: '共享级别',dataIndex: 'sharelevel',width:'20%',
          render:(text, record, index) => <div title={text}>{text}</div>
          },
          {title: '操作',dataIndex: 'opt',width:'20%',
          render:(text, record, index) => <div title={text}>{text}</div>
          }
        ],
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '保存',
          onClick: key => {},
        }
        ],
        datalist:[{"sharetype":"人力资源","sharedetail":"杨文元","sharelevel":"总部","opt":"删除"}],
        selectdata1:[{key: "1",showname: "人力资源",selected: true},{key: "2",showname: "部门",selected: false},
        {key: "3",showname: "角色",selected: false},{key: "4",showname: "所有人",selected: false}],
        selectdata2:[{key: "1",showname: "个人",selected: true},{key: "2",showname: "同部门",selected: false},
        {key: "3",showname: "同分部",selected: false},{key: "4",showname: "总部",selected: false},
        {key: "5",showname: "同部门及下级部门",selected: false},{key: "6",showname: "多部门",selected: false},
        {key: "7",showname: "同分部及下级分部",selected: false},{key: "8",showname: "多分部",selected: false},
        {key: "9",showname: "多人员",selected: false}],
        _height:this.getHeight(),
        heightInit:false,
      }
    }
    componentWillMount() {//一些初始化请求
    }
    showTotal(total){
      return `共 ${total} 条`;
    }
    showCurrentChange = (current) => {
      
    }
    onShowSizeChange =(current, pageSize)=>{
     
    }
    onSelectChange = (selectedRowKeys,selectedRows) => {
     
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    render() {
      const{showSearchAd,columns,menu,selectdata1,selectdata2,_height,datalist} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-perfor-reportshare" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title="考核结果分析共享设置"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>{}}>保存</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <div style={{padding:"5px 10px"}}>
              <WeaSelect options={selectdata1} value={"1"} viewAttr={2} style={{width:100,marginRight:10}}/>
              <WeaBrowser  type={1} inputStyle={{width:150,display:"inline-block"}} viewAttr={3} onChange={(ids, names, datas) => {}}/>
              </div>
              <div style={{padding:"5px 10px"}}>
              <span style={{marginRight:50}}>共享级别：</span><WeaSelect options={selectdata2} value={"1"} viewAttr={2} style={{width:150,marginRight:10}}/>
              </div>
              <Table columns={columns} bordered={true} scroll={{y: _height - 220}} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={{
                  total: 1,
                  onChange: this.showCurrentChange,
                  showTotal:this.showTotal,
                  current:1,
                  showQuickJumper:true,
                  pageSize:10,
                  showSizeChanger:true, 
                  onShowSizeChange:this.onShowSizeChange
              }}/>
          </WeaRightMenu>
        </div>
    )
  }
};